<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-09 16:24:13
 * @LastEditors: william
 * @LastEditTime: 2025-08-21 17:02:39
-->
<template>
  <nw-PageTitle title="烹饪管理" isBack />
  <nw-PageContainer>
    <scroll-view class="scroll-content" scroll-y>
      <view class="lists">
        <view class="list">
          <view class="list-top">
            <view class="lt-left">
              <view class="list-title">自动洗锅</view>
              <view class="list-subtitle">出菜完成后自动洗锅</view>
            </view>
            <view class="lt-right">
              <nw-Switch v-model="formData.value4"></nw-Switch>
            </view>
          </view>
          <view class="list-content">
            <view class="li">
              <view class="li-left">
                <view class="li-label">洗锅水量设置(g)</view>
                <view class="refer-value">1000g-5000g</view>
              </view>
              <view class="li-right">
                <up-number-box
                  v-model.number="formData.value"
                  :min="1000"
                  :step="1"
                  :max="5000"
                  integer
                  @change="handleNumberChange"
                  @blur="handleNumberBlur($event, 'value', 1000)"
                ></up-number-box>
              </view>
            </view>
            <view class="li">
              <view class="li-left">
                <view class="li-label">洗锅时长设置(s)</view>
                <view class="refer-value">10s-30s</view>
              </view>
              <view class="li-right">
                <up-number-box
                  v-model.number="formData.value2"
                  :min="10"
                  :step="1"
                  :max="30"
                  integer
                  @blur="handleNumberBlur($event, 'value2', 10)"
                ></up-number-box>
              </view>
            </view>
          </view>
        </view>
        <view class="list">
          <view class="list-top">
            <view class="lt-left">
              <view class="list-title">自动关机</view>
              <view class="list-subtitle">设置空闲状态自动关机</view>
            </view>
            <view class="lt-right">
              <nw-Switch v-model="formData.value5"></nw-Switch>
            </view>
          </view>
          <view class="list-content">
            <view class="li">
              <view class="li-left">
                <view class="li-label">连续空闲时长(min)</view>
                <view class="refer-value">10min-60min</view>
              </view>
              <view class="li-right">
                <up-number-box
                  v-model.number="formData.value3"
                  :min="10"
                  :step="1"
                  :max="60"
                  integer
                  @blur="handleNumberBlur($event, 'value3', 10)"
                ></up-number-box>
              </view>
            </view>
          </view>
        </view>
        <view class="list">
          <view class="list-top">
            <view class="lt-left">
              <view class="list-title">菜谱烹饪过程的异常处理</view>
            </view>
          </view>
          <view class="list-content">
            <view class="li">
              <view class="li-left">
                <view class="li-label">投料控制异常</view>
                <view class="refer-value">无法有效控制调料投放</view>
              </view>
              <view class="li-right" @click="handleSelectSheet('value6')">
                <view class="text">
                  {{
                    g_options.getOptionText(
                      g_options.cookingExcepteHandleOptions,
                      formData.value6,
                      '--'
                    )
                  }}
                </view>
                <ForwardIcons />
              </view>
            </view>
            <view class="li">
              <view class="li-left">
                <view class="li-label">调料余量不够</view>
                <view class="refer-value">调料可用余量不够</view>
              </view>
              <view class="li-right" @click="handleSelectSheet('value7')">
                <view class="text">
                  {{
                    g_options.getOptionText(
                      g_options.cookingExcepteHandleOptions,
                      formData.value7,
                      '--'
                    )
                  }}
                </view>
                <ForwardIcons />
              </view>
            </view>
            <view class="li">
              <view class="li-left">
                <view class="li-label">调料类型缺失</view>
                <view class="refer-value">调料可用余量不够</view>
              </view>
              <view class="li-right" @click="handleSelectSheet('value8')">
                <view class="text">
                  {{
                    g_options.getOptionText(
                      g_options.cookingExcepteHandleOptions,
                      formData.value8,
                      '--'
                    )
                  }}
                </view>
                <ForwardIcons />
              </view>
            </view>
            <view class="li">
              <view class="li-left">
                <view class="li-label">调料持续过高</view>
                <view class="refer-value">调料可用余量不够</view>
              </view>
              <view class="li-right" @click="handleSelectSheet('value9')">
                <view class="text">
                  {{
                    g_options.getOptionText(
                      g_options.cookingExcepteHandleOptions,
                      formData.value9,
                      '--'
                    )
                  }}
                </view>
                <ForwardIcons />
              </view>
            </view>
            <view class="li">
              <view class="li-left">
                <view class="li-label">电压范围异常</view>
                <view class="refer-value">调料可用余量不够</view>
              </view>
              <view class="li-right" @click="handleSelectSheet('value10')">
                <view class="text">
                  {{
                    g_options.getOptionText(
                      g_options.cookingExcepteHandleOptions,
                      formData.value10,
                      '--'
                    )
                  }}
                </view>
                <ForwardIcons />
              </view>
            </view>
          </view>
        </view>
        <view class="tips">
          说明:如菜谱执行中发现异常，即使选择禁用也会执行完该菜谱
        </view>
      </view>
    </scroll-view>
    <nw-ActionSheet
      v-model:show="actionSheetShow"
      v-model="actionSheetValue"
      :columns="actionSheetColumns"
      @confirm="handleActionSelect"
      @close="actionSheetShow = false"
    />
  </nw-PageContainer>
</template>

<script setup>
// 表单参数
const formData = ref({
  value: 2000,
  value2: 15,
  value3: 15,
  value4: false,
  value5: true,
  value6: '1',
  value7: '2',
  value8: '2',
  value9: '2',
  value10: '2'
})
// 弹框参数
const actionSheetShow = ref(false)
const actionSheetValue = ref([])
const actionSheetColumns = ref([g_options.cookingExcepteHandleOptions])
const actionSheetType = ref('')

onMounted(_ => {
  // getDataList()
})

function getDataList() {
  // g_utils.showLoading()
  // g_api.user.apiGetPrincipal().then(({ code, data }) => {
  //   if (code === 200 && data) {
  //     tableList.value = data
  //   }
  // })
  // tableList.value = [{}, {}, {}, {}]
  // setTimeout(() => {
  //   uni.hideLoading()
  // }, 1000)
}

const handleNumberChange = e => {
  console.log('handleNumberChange-当前值为: ', e.value)
}

const handleNumberBlur = (e, key, min) => {
  console.log(
    'handleNumberBlur-当前值为: ',
    e.value,
    min > e.value ? min : e.value
  )
  formData.value[key] = min > e.value ? min : e.value
}

const valChange2 = type => {
  console.log('当前值为: ', type)
}

const handleSelectSheet = key => {
  actionSheetValue.value = [formData.value[key]]
  actionSheetType.value = key
  actionSheetShow.value = true
}

const handleActionSelect = e => {
  console.log('handleActionSelect-当前值为: ', e)
  formData.value[actionSheetType.value] = e.value[0].value
}
</script>

<style lang="scss" scoped>
.scroll-content {
  height: calc(100%);
  overflow: hidden;
  box-sizing: border-box;
}

.lists {
  padding: 0 22rpx 22rpx;
  .list {
    margin-top: 22rpx;
    padding: 0 22rpx;
    background-color: var(--bg-color);
    border-radius: 18rpx;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(6, 29, 23, 0.03);
    .list-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 74rpx;
      box-sizing: border-box;
    }
    .lt-left {
      flex: 1;
      display: flex;
      align-items: center;
      line-height: 24rpx;
    }
    .list-title {
      font-size: 26rpx;
      font-weight: 600;
      color: var(--color-333);
    }
    .list-subtitle {
      margin-left: 16rpx;
      font-size: 18rpx;
      font-weight: 400;
      color: var(--color-999);
    }
    .lt-right {
      //
    }
  }
  .tips {
    margin: 22rpx 26rpx 0;
    line-height: 20rpx;
    font-size: 18rpx;
    font-weight: 400;
    color: var(--color-999);
  }
}

.list-content {
  .li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    border-top: 1rpx solid var(--border-color);
    .li-left {
      display: flex;
      flex-direction: column;
    }
    .li-label {
      line-height: 24rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: var(--color-333);
    }
    .refer-value {
      margin-top: 8rpx;
      line-height: 20rpx;
      font-size: 18rpx;
      font-weight: 400;
      color: var(--color-999);
    }
    .li-right {
      display: flex;
      align-items: center;
      .text {
        line-height: 22rpx;
        margin-right: 20rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: var(--color-666);
      }
    }
  }
}
</style>
